<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>场次列表</span>
          <el-button class="button" @click="show = true" text
            >添加场次</el-button
          >
        </div>
      </template>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="id" label="id" />
        <el-table-column prop="movie_id" label="播放电影">
          <template #default="scope">
            {{ getMovieInfo(scope.row.movie_id) }}
          </template>
        </el-table-column>
        <el-table-column prop="fare" label="票价" />
        <el-table-column prop="auditorium_id" label="所属放映厅">
          <template #default="scope">
            {{ getRoomInfo(scope.row.auditorium_id) }}
          </template>
        </el-table-column>
        <el-table-column prop="show_time" label="放映时间">
          <template #default="scope">{{ Time(scope.row.show_time) }}</template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间">
          <template #default="scope">{{ Time(scope.row.createdAt) }}</template>
        </el-table-column>
        <el-table-column prop="id" label="操作">
          <template #default="scope">
            <el-button @click="edit(scope.row.id)">修改</el-button>
            <el-button @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="show" title="添加/修改场次" width="800">
      <el-form :model="form" label-position="left" label-width="140px">
        <el-form-item label="票价(/元)">
          <el-input type="text" v-model="form.fare" autocomplete="off" />
        </el-form-item>
        <el-form-item label="放映电影">
          <el-select
            v-model="form.movie_id"
            class="m-2"
            placeholder="请选择"
            size="large"
            style="width: 240px"
            value-key="id"
          >
            <el-option
              v-for="item in movieList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="放映时间">
          <el-date-picker
            v-model="form.show_time"
            type="datetime"
            placeholder="选择放映时间"
          />
        </el-form-item>
        <el-form-item label="所属放映厅">
          <el-select
            v-model="form.auditorium_id"
            class="m-2"
            placeholder="请选择"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in roomList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="提交">
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, onMounted, reactive } from "vue";
import { Try, Time } from "@/utils";
import {
  getMovie,
  getRoomList,
  getTime,
  postTime,
  putTime,
  delTime,
} from "@/api";
const show = ref(false);
const tableData = ref([]);
const roomList = ref([]);
const movieList = ref([]);
const form = reactive({
  fare: "",
  movie_id: "",
  auditorium_id: "",
  id: "",
  show_time: "",
});
function getRoomInfo(id) {
  const cinema = roomList.value.find((item) => item.id == id);
  return cinema ? cinema.name : null;
}
function getMovieInfo(id) {
  const cinema = movieList.value.find((item) => item.id === id);
  return cinema ? cinema.title : null;
}
function getMovieList() {
  Try(async () => {
    const { code, data } = await getMovie();
    if (code === 200) {
      movieList.value = data;
    }
  });
}
function getroomlist() {
  Try(async () => {
    const { code, data } = await getRoomList();
    if (code === 200) {
      roomList.value = data.rows;
    }
  });
}
function getTimeList() {
  Try(async () => {
    const { code, data } = await getTime();
    if (code === 200) {
      tableData.value = data;
    }
  });
}
function submit() {
  Try(async () => {
    const { id } = form;
    const res = id ? await putTime(form) : await postTime(form);
    console.log(res);
    if (res.code === 200) {
      ElMessage.success(res.message);
      show.value = false;
      getTimeList();
      form.fare = "";
      form.movie_id = "";
      form.auditorium_id = "";
      form.show_time = "";
      form.id = "";
    } else {
      ElMessage.error(res.message);
    }
  });
}
function edit(id) {
  Try(async () => {
    const res = await getTime({ id });
    console.log(res);
    if (res.code === 200) {
      show.value = true;
      const { fare, movie_id, auditorium_id, show_time, id } = res.data[0];
      form.fare = fare;
      form.movie_id = movie_id;
      form.auditorium_id = auditorium_id;
      form.show_time = show_time;
      form.id = id;
    }
  });
}
function del(id) {
  ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    Try(async () => {
      const res = await delTime({ id });
      if (res.code === 200) {
        ElMessage.success(res.message);
        getTimeList();
      }
    });
  });
}
onMounted(async () => {
  await Promise.all([getMovieList(), getroomlist(), getTimeList()]);
});
</script>
<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
</style>
